<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      .con {
        width: 100px;
        /* 高度由子元素高度撑开 */
        height: auto;
        background-color: red;
        padding-bottom: 10px;
        text-align: center;
      }

      .content {
        background-color: green;
        text-align: right;
        display: none;
      }
    </style>

    <script>
      window.onload = function () {
        //获取操作的菜单项
        var items = document.querySelectorAll(".item");

        //获取被操作的子菜单
        var contents = document.querySelectorAll(".content");

        //为多个菜单绑定单击事件
        for (let i = 0; i < items.length; i++) {
          bind(i); //调用函数绑定事件
        }

        //绑定事件的函数
        function bind(index) {
          items[index].onclick = function () {
           
      
            //单击指定菜单如果对应内容隐藏就显示  显示就变隐藏
            if (contents[index].style.display == "none") {
              //隐藏的
              //显示
              contents[index].style.display = "block";
              //只能同时显示一块内容  其他的不要
              //当前对应的内容显示 其他内容块一律隐藏
              //处理和当前菜单匹配显示的子菜单以外其他的隐藏
              for(let i = 0; i < contents.length; i++){
                //处理当前匹配的块 且 是显示的就隐藏
                    if(i != index && contents[i].style.display == "block"){
                        contents[i].style.display = "none";
                    }
              }


            } else {
              //显示的
              //隐藏
              contents[index].style.display = "none";
            }
          };
        }
      };
    </script>
  </head>
  <body>
    <!-- 外层容器 -->
    <div class="con">
      <ul class="menu">
        <li class="item">
          <p>菜单1</p>
          <!-- 内容 -->
          <ul class="content">
            <li>子菜单1-1</li>
            <li>子菜单1-2</li>
            <li>子菜单1-3</li>
          </ul>
        </li>
        <li class="item">
          <p>菜单2</p>
          <!-- 内容 -->
          <ul class="content">
            <li>子菜单2-1</li>
            <li>子菜单2-2</li>
            <li>子菜单2-3</li>
          </ul>
        </li>
        <li class="item">
          <p>菜单3</p>
          <!-- 内容 -->
          <ul class="content">
            <li>子菜单3-1</li>
            <li>子菜单3-2</li>
            <li>子菜单3-3</li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>
